<template>
    <div class="xinzeng">
        <div class="gr_title">
      <div class="fan" @click="fanhui">
        <img src="../assets/images/fanhui.png" height="21px" alt="" />
      </div>
      新增客户信息
      <div>
          <div class="shouye" @click="tianzhuanshouye"><img src="../assets/images/fanhuishouye.png" height="21px"  alt=""></div>
      </div>
    </div>
    <div class="zhongyao">
        <van-field required v-model="custName" label="客户名称" />
        <van-field required v-model="telephone" label="联系方式" />
    </div>
    <div>
        <van-field v-model="education" label="学历" />
        <van-field v-model="age" label="年龄" />
        <van-field v-model="sex" label="性别" />
        <van-field v-model="cityName" label="所属城市" />
        <van-field v-model="company" label="公司名称" />
        <van-field v-model="position" label="职务" />
    </div>
    <div class="anniu">
     <van-button round type="info" size="large" :disabled="flag" @click="baocun">保存</van-button>
    </div>
    </div>
</template>

<script>
import {Apicust} from "../requset/api"
export default {
    data () {
        return {
          custName:"",
          telephone:"",
          education:"",
          age:"",
          sex:"",
          cityName:"",
          company:"",
          position:"",
          flag:true
        }
    },
    updated(){
        console.log(123);
        if(this.cucustName != '' && this.telephone !=""){
            this.flag = false
        }else{
            this.flag = true
        }
    },
    methods:{
        tianzhuanshouye(){
            this.$router.push('/')
        },
        fanhui(){
            this.$router.back()
        },
        baocun(){
            Apicust({
                custName:this.custName,
                telephone:this.telephone,
                education:this.education,
                age:Number(this.age),
                sex:this.sex,
                cityName:this.cityName,
                company:this.company,
                position:this.position,
            }).then(res=>{
                console.log(res);
            })
            this.$router.back()
        }
    }
}
</script>
 
<style lang = "less" scoped>
.xinzeng{
    width: 100%;
    min-height: 100vh;
    background: #f5f5f5;
 .gr_title {
    width: 100%;
    height: 43px;
    background-color: #003399;
    background-size: 80%;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    line-height: 43px;
    padding-right: 16px;
    .fan {
      line-height: 43px;
      margin-left: 10px;
      img {
        float: left;
      }
    }
    div {
      img {
        margin-top: 10px;
      }
    }
    .active {
      opacity: 0;
    }
  }
  .zhongyao{
      margin-top: 10px;
      margin-bottom: 10px;
  }
  .anniu{
      width: 100%;
      height: 60px;
      border-top:1px solid #dedede ;
      background: #fff;
      box-sizing: border-box;
      position: absolute;
      left: 0;
      bottom: 0;
      .van-button{
          width: 90%;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%,-50%);
      }
  }
  }
   
</style>